<template>
	<view class="container" :style="{background:`url(${pageBg})`,'background-size': 'contain'}">
		<top-navigation isShow isFix backIconColor='#000' isBack>
			<template #center-slot>
				<view class="paihang">
					<x-btn @tap="getRanking">排行榜</x-btn>
				</view>
			</template>
		</top-navigation>
		<view class="mask" v-if="false">

		</view>
		<view class="count justify-between">
			<view class="count-get LcdD">
				<view class="bg-count">
					<text class="LcdD">000000000</text>
				</view>
				<view class="count-show">
					<text class="LcdD">{{getGameCoins}}</text>
				</view>
			</view>
			<view class="count-total LcdD">
				<view class="bg-count">
					<text class="LcdD">000000000</text>
				</view>
				<view class="count-show ">
					<text class="LcdD">{{gamecoin}}</text>
				</view>
			</view>
		</view>
		<view class="game-box " :style="{background:`url(${gameBg}) no-repeat center center / 80% 80%`}">
			<view class="justify-start">
				<view class="score-box" v-for="v,k in topBox" :class="[v.isBig?'small':'']" :key="k">
					<image class="icon " :src="getImg(v.val,v.isBig)">

					</image>
					<view class="" style="color: #FFF;position:absolute;bottom: 0;z-index:1">
						{{v.isBig?'':'小'}}
					</view>
				</view>
			</view>
			<view class="game-r  justify-between">
				<view class="">
					<view class="score-box" v-for="v,k in leftBox" :key="k">
						<image :class="[v.isBig?'small':'']" :src="getImg(v.val,v.isBig)" class="icon"></image>
						<view class="" style="color: #FFF;position:absolute;bottom: 0;z-index:1">
							{{v.isBig?'':'小'}}
						</view>
					</view>
				</view>
				<view class="">
					<view class="score-box" v-for="v,k in rightBox" :key="k">
						<image :class="[v.isBig?'small':'']" :src="getImg(v.val,v.isBig)" class="icon"></image>
						<view class="" style="color: #FFF;position:absolute;bottom: 0;z-index:1">
							{{v.isBig?'':'小'}}
						</view>
					</view>
				</view>

			</view>
			<view class="justify-end ">
				<view class="" v-for="v,k in bottomBox" :key="k">
					<image :class="[v.isBig?'small':'']" :src="getImg(v.val,v.isBig)" class="icon"></image>
					<view class="" style="color: #FFF;position:absolute;bottom: 0;z-index:1">
						{{v.isBig?'':'小'}}
					</view>
				</view>

			</view>



			<view @tap="handleStart(k)" class="game-kuang"
				:class="[getStar(k)?getStar(k)&&(!loading)?'flash':'star':'',]"
				:style="{top:`calc((100vw - 60rpx) / 7 * ${getTopPo(k)})`,left:`calc((100vw - 60rpx) / 7 * ${getleftPo(k)})`,}"
				v-for="(v,k) in 24" :key="v">
			</view>
			<view class="guess-size flex-col align-center">
				<view class="" style="font-size: 36rpx;color: #000;">
					猜大小
				</view>
			
				<view class="po-box LcdD">
					<!-- 大小数字 -->
					<view class="bg-count">
						<text class="LcdD">00</text>
					</view>
					<view class="count-show">
						<text class="LcdD">{{randomNumber}}</text>
					</view>
				</view>
			</view>
			<view class="guess-multiplier flex-col align-center" v-if="!loading&&!getGameCoins">
				<view class="" style="font-size: 20rpx;color: #000;">
					<x-btn>倍率</x-btn>
				</view>
				<view class="po-box LcdD justify-center">
					<x-btn @tap="setMultiplier('+')">+</x-btn>
					<x-btn><text class="LcdD">{{multiplier}}</text> </x-btn>

					<x-btn @tap="setMultiplier('-')">-</x-btn>
				</view>
			</view>

			<!-- 奖励模块 -->
			<view class="justify-between color-box">
				<view class="reward-zone-box" v-for="(item,index) in Box.slice(1)" :key="index">
					<view class="prize-amount justify-center">
						<!-- 这里是奖励金额 -->
						{{item.reward}}
					</view>
					<view class="reward-zone">
						<!-- 这里是图 -->
						<image class="reward-chart-img" :src="`/game/static/game/fuilt/${item.icon}.png`"
							mode="widthFix">
						</image>
					</view>
					<view class="stake justify-center LcdD">
						<view class="bg-count">
							<text class="LcdD">00</text>
						</view>
						<view class="count-show">
							<text class="LcdD">{{item.betting}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-box  justify-between">
				<view class="" v-if="!loading&&!getGameCoins">
					<x-btn :padd="0" @tap="betting('all-in')">ALL+IN</x-btn>
					<x-btn :padd="0" @tap="betting('all')">ALL+1</x-btn>
				</view>
				<x-btn :padd='0' @tap="arrow('-')">
					<image style="transform: rotate(180deg);" class="start-btn" src="/game/static/game/btn/arrow-l.png"
						mode=""></image>
				</x-btn>
				<x-btn :padd='0' @tap="arrow('+')">
					<image class="start-btn" src="/game/static/game/btn/arrow-l.png" mode=""></image>
				</x-btn>
				<x-btn @tap="handelSelect('min')">1-6小</x-btn>
				<x-btn @tap="handelSelect('max')">8-13大</x-btn>
				<x-btn border='none' :padd='0'>
					<view class="">
						<view class="" @tap="run('auto')"v-if="!loading">
							<image class="start-btn" src="/game/static/game/btn/start.png" mode=""></image>
						</view>
						<view class="" v-if="loading">
							<image class="start-btn" src="/game/static/game/btn/start.png" mode=""></image>
						</view>
					</view>
				</x-btn>

			</view>
			<view class="btn-box justify-between" v-if="!loading&&!getGameCoins">
				<x-btn border='none' :padd='0' v-for="(item,index) in Box.slice(1)" @tap="betting(item,index)" :key="index">
					<image class="start-btn" style="border-radius: 10rpx;"
						:src="`/game/static/game/fuilt/${item.icon}.png`" mode=""></image>
				</x-btn>
			</view>
			<view class="">
				<view class="LcdD">
					<!-- 游戏币:{{gamecoin}}-速度{{seed}}-停止数{{stopNumber}}-添加数{{stopAddingNumbers}} -->
				</view>
				<view class="" v-if="gamecoin<1">
					<x-btn @tap="gamecoin+=100000">没有金币点我</x-btn>
				</view>
			</view>
			<!-- <view class="contact-button justify-end">
				<x-btn><button class="" :plain='true' size='mini' open-type="contact" show-message-card session-from
						send-message-path send-message-title><text>留言</text></button></x-btn>

			</view> -->
			<image @tap="tutorialShow = !tutorialShow" class="tutorial" v-show="tutorialShow" src="https://mp-1cc28b7f-f35a-4955-8572-8c522cebf127.cdn.bspapp.com/gameimg/jiaocheng.png" mode="widthFix"></image>
			<x-btn @tap="tutorialShow = !tutorialShow">{{tutorialShow?'关闭教程':'教程'}}</x-btn>
			<x-btn padd='0'><text style="font-size: 20rpx;">提示:积分数据仅存在本地,请勿清除缓存,排行上传积分仅做排名使用</text></x-btn>
			<!-- ranking-list -->
		</view>
	</view>
</template>
<script module="kuang" lang="wxs">
	function getStar(k) {

	}
	module.exports = {
		msg: '我是wxs',
		getStar: getStar,
		// touchmove: touchmove
	}
</script>
<script setup>
	const db = uniCloud.database();
	const crystalList =ref('1')
	const getList =async ()=> {
		uni.showLoading({
			title: '加载中'
		})
		const res = await db.collection('bs-notice').limit(10)
			.orderBy('score', 'desc') // 按照score字段降序排序
			.get()
		crystalList.value = res.result.data[0].pass
		uni.hideLoading()
	}
	import {
		BOX,
		TOPBOX,
		RIGHTBOX,
		BOTTOMBOX,
		LEFTBOX,
		BOXVALUE,
		gameBgBase64,
		pageBgBase64
	} from './data.js'
	import {
		getRanking
	} from './methods.js'
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted,
		getCurrentInstance
	} from 'vue'
	const ALIOSSURL = 'https://baishuang.oss-cn-beijing.aliyuncs.com/audio/'
	const ALIOSSURLY = 'https://baishuang.oss-cn-beijing.aliyuncs.com/m4audio/'

	const login = () => {
		// 存数据库

	}
	// 将角度转换为弧度
	function deg2rad(deg) {
		return deg * (Math.PI / 180);
	}

	// 计算两个经纬度之间的大圆距离（单位：千米）
	function distanceBetweenPoints(lat1, lon1, lat2, lon2) {
		const R = 6371; // 地球半径，单位：千米
		const dLat = deg2rad(lat2 - lat1);
		const dLon = deg2rad(lon2 - lon1);
		const a =
			Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
			Math.sin(dLon / 2) * Math.sin(dLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		const distance = R * c; // 结果单位：千米
		return distance;
	}

	// 示例用法
	const distanceInKm = distanceBetweenPoints(40.050599, 116.617435, 30.578282, 103.960388);
	console.log(
		"两点之间的距离（千米）：" + distanceInKm);


	const pageBg = ref(pageBgBase64)
	const gameBg = ref(gameBgBase64)
	// const getRanking = getRanking
	const getStar = (k) => {
		if (flashingBox.value.includes(k)) {
			return true
		} else {
			return false
		}
	}
	const tips = () => {
		uni.showToast({
			title: '点击1-6小或者8-13大',
			icon: 'none'
		})
	}
	const tutorialShow = ref(false)
	// 初始游戏币
	const gamecoin = ref(100000)
	const getGameCoins = ref(0)
	const borderColor = ref('#00c330')
	const customizeTheNumberOfFlashes = ref(5)
	const borderkColor = ref('rgba(85, 255, 0, 0.2)')
	const currentlyFlashing = ref(0) //中奖数字
	const flashingBox = ref([])
	const stopRun = ref(null)
	console.log('box', BOX);
	const Box = ref(BOX)
	const topBox = ref(TOPBOX)
	const rightBox = ref(RIGHTBOX)
	const bottomBox = ref(BOTTOMBOX)
	const leftBox = ref(LEFTBOX)
	const INITIAL_SPEED = 10
	const seed = ref(10) //初始速度
	let currentStage = ref(1) //当前阶段
	const loading = ref(false) //当前阶段
	const randomNumber = ref(0) //随机数1-13
	// 写一些跳舞模式 9和21进入
	const danceTimer = ref(null)
	const dance = () => {
		loading.value = true
		// 有一定几率直接输掉
		let number = 24
		let toggle = false
		danceTimer.value = setInterval(() => {
			toggle = !toggle
			flashingBox.value = []
			for (let i = 0; i < number; i++) {
				if (toggle) {
					if (i % 2 == 1) {
						flashingBox.value.push(i)
					}
				} else {
					if (i % 2 != 1) {
						flashingBox.value.push(i)
					}
				}
			}
		}, 900)
		setTimeout(() => {
			flashingBox.value = []
			// 随机push
			let randomFrequency = getRandom(3, 5)
			for (let i = 0; i < randomFrequency; i++) {
				let random = getRandom(0, 23)
				if (random != 9 || random != 21) {
					flashingBox.value.push(random)
				}
			}
			console.log('flashingBox.value', flashingBox.value);
			clearInterval(danceTimer.value)
			danceTimer.value = null
			settlement() //结算
		}, 4000)


	}

	const handelSelect = (e) => {
		if (loading.value || (getGameCoins.value == 0)) return
		loading.value = true
		soundEffectsDevice(`s${getRandom(1,8)}.m4a`,false)
		let timer = setInterval(() => {
			randomNumber.value = getRandom(1, 13)
		}, 50)
		soundEffectsDevice(`diudiu.m4a`,true)
		setTimeout(() => {
			clearInterval(timer)
			if ((e == 'min') && randomNumber.value < 7) {
				if (getRandom(1, 13) > 7) {

				} else {
					console.log('故意不让你赢');
					randomNumber.value = getRandom(8, 13)
				}
			}
			if (randomNumber.value > 7 && (e == 'max')) {
				if (getRandom(1, 13) > 7) {

				} else {
					console.log('故意不让你赢');
					randomNumber.value = getRandom(1, 7)
				}
			}
			if (randomNumber.value < 7 && (e == 'min')) {
				getGameCoins.value = getGameCoins.value * 2
				soundEffectsDevice(`w${getRandom(1,9)}.m4a`,true)
			} else if (randomNumber.value > 7 && (e == 'max')) {
				getGameCoins.value = getGameCoins.value * 2
				soundEffectsDevice(`w${getRandom(1,9)}.m4a`,true)
			} else {
				getGameCoins.value = 0
				hitSound.stop()
			}
			depositCoins()
			loading.value = false
		}, 2000)
	}
	const openingTimer = ref(false)
	onMounted(() => {
		console.log('BOXVALUE', BOXVALUE.length);
		// run()
		// canvasInit()
		init()
		if (getRandom(1, 10) >= 5) {
			dance()
		} else {
			openingTimer.value = setInterval(() => {
				rotate()
			}, 100)

		}
	}) 
	onUnmounted(() => {

	}) 
	const init = () => {
		const value = uni.getStorageSync('goldCoins')
		if (value) {
			gamecoin.value = value
		}
		clearInterval(openingTimer.value)
		openingTimer.value = null
		currentlyFlashing.value = getRandom(0, 23)
		getGameCoins.value = 0
		flashingBox.value = [currentlyFlashing.value]
	}
	// 向下取整函数
	const floorNumber = (num) => {
		return Math.floor(num);
	}
	const handleStart = (k) => {
		if (loading.value || getGameCoins.value) return
		flashingBox.value = [k]
	}
	const arrow = (e) => {
		if (loading.value) return
		soundEffectsDevice(`s${getRandom(1,8)}.m4a`,false)
		if (e == '+') {
			gamecoin.value += floorNumber(getGameCoins.value / 2)
			getGameCoins.value = floorNumber(getGameCoins.value / 2)
		} else {
			if (gamecoin.value <= 0 || gamecoin.value < (getGameCoins.value / 2)) return
			gamecoin.value -= floorNumber(getGameCoins.value / 2)
			getGameCoins.value += floorNumber(getGameCoins.value / 2)
		}
	}
	// 是否下注
	const isOrder = ref(false)
	// 下注按钮
	const betting = (item,index) => {
		if (loading.value) return
		if (isOrder.value == false) {
			Box.value.slice(1).map(v => {
				v.betting = 0
			})
		}
		console.log(item);
		if (flashingBox.value.length != 1) {
			init()
		}
		if (item == 'all') {
			if (Box.value.slice(1).length * multiplier.value > gamecoin.value) return
			soundEffectsDevice(`s${getRandom(1,8)}.m4a`,false)
			Box.value.slice(1).map(v => {
				if (v.betting >= 99) {

				} else {
					v.betting++
					// v.betting=v.betting+multiplier.value
					gamecoin.value = gamecoin.value - multiplier.value
				}

			})
			isOrder.value = true
		} else if (item == 'all-in') {
			soundEffectsDevice(`s${getRandom(1,8)}.m4a`,false)
			uni.showModal({
				content: '是否全下注',
				success: (res) => {
					if (res.confirm) {
						if (Box.value.slice(1).length * multiplier.value > gamecoin.value) {
							uni.showToast({
								title: '余额不足',
								icon: 'none'
							})
							return
						}
						let maxNum = (gamecoin.value / multiplier.value / 8) >= 99 ? 99 :
							floorNumber(
								gamecoin.value / multiplier
								.value / 8)
						Box.value.slice(1).map(v => {
							if (v.betting >= 99) {

							} else {
								let betNum = maxNum - v.betting
								v.betting += betNum
								// v.betting=v.betting+multiplier.value
								gamecoin.value = gamecoin.value - (betNum * multiplier
									.value)
							}

						})
						isOrder.value = true
					}
				}
			})

		} else {
			if (gamecoin.value < 1 || item.betting >= 99) return
			console.log(index);
			soundEffectsDevice(`s${index+1}.m4a`)
			item.betting++
			// item.betting=item.betting+multiplier.value
			// gamecoin.value--
			gamecoin.value = gamecoin.value - multiplier.value
			isOrder.value = true
		}
	}
	const stopNumber = ref(160)
	const stopAddingNumbers = ref(10)
	const coining = () => {
		let didYouPutInTheCoin = false
		Box.value.slice(1).map(v => {
			if (v.betting > 0) {
				didYouPutInTheCoin = true
			}
		})
		return didYouPutInTheCoin
	}
	// 大奖数组
	const bigPrize = ref([
		4, 7, 15, 19
	])
	// #ifdef MP
	const hitSound = wx.createInnerAudioContext({useWebAudioImplement:true});
	// #endif
	// #ifndef MP
	const hitSound = uni.createInnerAudioContext({useWebAudioImplement:true});
	// #endif
	const run = (e = 'loading') => {
		if (!coining()) {
			uni.showToast({
				title: '请先投币',
				icon: 'none'
			})
			return
		}
		console.log(e, 'eeee');
		if (e == 'auto') {
			if (getGameCoins.value > 0) {
				gamecoin.value += getGameCoins.value
				getGameCoins.value = 0
				depositCoins()
				return
			}

			if (loading.value) return
			soundEffectsDevice('Spin.m4a')
			// hitSound.src = '/game/static/game/audio/Spin.m4a'; // 确保音频文件路径正确
			// // hitSound.src = 'https://baishuang.oss-cn-beijing.aliyuncs.com/Spin.m4a'; // 确保音频文件路径正确
			// hitSound.play();
			depositCoins()
			// 每次开始扣除游戏币 判断是第一次下注还是
			if (isOrder.value) {
				// 已经下注不要重复扣除
			} else {
				let kou = 0
				Box.value.map(v => {
					if (v.betting != 0) {
						kou += v.betting * multiplier.value
					}
				})
				if (kou > gamecoin.value) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					})
					Box.value.map(v => {
						v.betting = 0

					})
					return
				} else {
					gamecoin.value -= kou
				}
			}


			stopNumber.value = getRandom(120, 160)
			stopAddingNumbers.value = getRandom(5, 10)
			loading.value = true
		}
		if (stopRun.value) {
			console.log('进入停止', currentlyFlashing.value);
			// 进入bar大奖
			// currentlyFlashing.value = 2
			if (currentlyFlashing.value == 2 || currentlyFlashing.value == 3) {
				let num = getRandom(1, 23) == 1
				console.log('num', num);
				if (num) {
					console.log('获得');
					stop()
					return
				} else {
					console.log('错过');
					rotate()
					rotate()
					stop()
					return
				}
			} else {
				if (bigPrize.value.includes(currentlyFlashing.value)) {
					let num = getRandom(1, 23) < 5
					if (num) {
						console.log('获得大水果');
						stop()
						return
					} else {
						console.log('错过大水果');
						rotate()
						stop()
						return
					}
				} else {
					stop()
					return
				}

			}

		}

		stopRun.value = setInterval(() => {
			seed.value += 1
			if (currentStage.value == 2) {}
			if ((currentStage.value == 1) && (seed.value > stopNumber.value)) {
				clearInterval(stopRun.value)
				stopRun.value = null
				currentStage.value = 2
				run()
				return
			} else if (currentStage.value == 2 && (seed.value > (stopNumber.value + 10))) {

				currentStage.value = 1
				run()

				return
			}
			rotate()


		}, seed.value)
	}
	// 旋转封装
	const rotate = () => {
		currentlyFlashing.value++
		if (currentlyFlashing.value == 24) {
			currentlyFlashing.value = 0
		}
		flashingBox.value = [currentlyFlashing.value]
		// 最大数是23 那么要在多少的时候需要减呢 已闪烁5个为例子
		// 1                           1
		if (currentlyFlashing.value <= (customizeTheNumberOfFlashes.value - 2)) {
			// 1
			let numberOfCycles = customizeTheNumberOfFlashes.value - currentlyFlashing.value - 1
			// 3
			for (let i = 1; i < (currentlyFlashing.value + 1); i++) {
				flashingBox.value.push(currentlyFlashing.value - i)
			}
			for (let i = 0; i < numberOfCycles; i++) {
				flashingBox.value.push(23 - i)
			}

		} else {
			for (let i = 1; i < customizeTheNumberOfFlashes.value; i++) {
				flashingBox.value.push(currentlyFlashing.value - i)
			}

		}
	}
	const stop = () => {
		// 4.96325
		soundEffectsDevice('end.m4a')
		stopInit()
	}
	// 停止初始化
	const stopInit = () => {
		clearInterval(stopRun.value)
		stopRun.value = null
		seed.value = INITIAL_SPEED
		// 大满贯概率减小

		flashingBox.value = [currentlyFlashing.value]

		// 进入lcuk
		if (currentlyFlashing.value == 9 || currentlyFlashing.value == 21) {
			if (getRandom(1, 5) > 2) {
				soundEffectsDevice('bswin.m4a',true)
				dance()
				return
			} else {
				soundEffectsDevice('chidiao.m4a')
				uni.showToast({
					title: '加油!再接再厉',
					icon: 'none'
				})
				settlement()
				return
				// 被吃了
			}
		}
		// 进入跳闪模式
		if (getRandom(1, 100) <= 10) {
			soundEffectsDevice('diudiu.m4a',true)
			jumpingFlash()
			return
		}
		settlement()
	}
	// 音效器
	const soundEffectsDevice = (music,blean=false) => {
		hitSound.stop() // 停止
		hitSound.loop = blean
		console.log('hitSound.duration',hitSound.duration);
		let baseUrl = crystalList.value==1?ALIOSSURLY:'/game/static/game/audio/'
		hitSound.src=`${baseUrl}${music}`
		hitSound.play() // 停止
	}
	const jumpingFlash = () => {
		
		danceTimer.value = setInterval(() => {
			let randomJumpTimes = getRandom(0, 6)
			let randomJumpTimes1 = getRandom(7, 12)
			let randomJumpTimes2 = getRandom(13, 18)
			let randomJumpTimes3 = getRandom(18, 23)
			flashingBox.value = [randomJumpTimes, randomJumpTimes1, randomJumpTimes2, randomJumpTimes3]
			console.log('flashingBox.value', flashingBox.value);
		}, 500)
		setTimeout(() => {
			clearInterval(danceTimer.value)
			danceTimer.value = null
			settlement()
		}, 3000)

	}
	// 获奖结算
	const whetherToWinOrNot = ref(false)
	const decimal = ref([
		2, 5, 8, 11, 14, 17, 20, 23
	])
	// 向上取整

	const ceilNumber = (num) => {
		return Math.ceil(num)
	}
	// 停止得后结算
	
	const settlement = () => {
		
			// hitSound.stop() // 停止

		// 获奖的水果
		getGameCoins.value = 0
		flashingBox.value.map(v => {
			var a = BOXVALUE[v]
			// console.log('中奖的水果', a);
			let obj = Box.value.find(e => e.icon == a)
			// 查到结果并且下注不为0
			if (obj && obj.betting != 0) {
				if (decimal.value.includes(v)) {
					getGameCoins.value += ceilNumber(obj.reward / 2) * obj.betting * multiplier.value
				} else {
					getGameCoins.value += obj.reward * obj.betting * multiplier.value
				}
				console.log('获得的奖金为', obj.reward * obj.betting);
			}
		})
		loading.value = false
		isOrder.value = false
		if(getGameCoins.value>0){
			console.log('播放庆祝音乐');
			soundEffectsDevice(`w${getRandom(1,9)}.m4a`,true)
		}
		console.log('=======================最终获奖结果', getGameCoins.value, '=======================');
		return
		return
		// 有就继续计算金额
		// 交集

	}
	const getTopPo = (k) => {
		if (k <= 6) {
			return 0
		} else if (k > 6 && k <= 12) {
			return k - 6
		} else if (k > 12 && k <= 18) {
			return 6
		} else if (k > 18 && k <= 24) {
			return 24 - k
		}
	}

	const getleftPo = (k) => {
		if (k <= 6) {
			return k
		} else if (k > 6 && k <= 12) {
			return 6
		} else if (k > 12 && k <= 18) {
			return 18 - k
		} else if (k > 18 && k <= 24) {
			return 0
		}
	}


	const getRandom = (min, max) => {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	const getImg = (v, big) => {
		let img = Box.value.find(e => e.val == v)
		return `/game/static/game/fuilt/${img.icon+(big?'':'-s')}.png`
	}
	const multiplier = ref(1)
	const setMultiplier = (e) => {
		if (loading.value) return
		soundEffectsDevice(`s${getRandom(1,8)}.m4a`,false)
		Box.value.slice(1).map(v => {
			if (isOrder.value) {
				if (v.betting != 0) {
					gamecoin.value += v.betting
					v.betting = 0
				} else {
					v.betting = 0
				}
			}

		})
		if (e == '+') {
			if (multiplier.value == 10) {

			} else {
				multiplier.value++
			}
		} else {
			if (multiplier.value == 1) {

			} else {
				multiplier.value--
			}
		}
	}
	// 存金币
	const depositCoins = () => {
		// hitSound.stop() // 停止
		uni.setStorageSync('goldCoins', gamecoin.value)
	}
</script>

<style lang="scss" scoped>
	@import './game.scss';

	.clock {
		width: 300px;
		height: 300px;
	}

	$game-box-size: calc((100vw - 60rpx) / 7);

	@keyframes metallic {
		0% {
			background-position: 0% 50%;
		}

		100% {
			background-position: 100% 50%;
		}
	}

	.contact-button {
		margin-top: 20rpx;
		width: 100%;

	}

	.container {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-size: contain;
		box-shadow: inset 0 0 15px 6px #631363;
		;
		// background: linear-gradient(135deg, #ffffff, #dcdcdc, #a6a6a6, #f0f0f0, #bcbcbc, #ffffff, #dcdcdc, #a6a6a6);
		// background-size: 200% 200%;
		// animation: metallic 5s linear infinite;
		// filter: brightness(1.2);



		.count {
			color: rgba(219, 0, 3, 1);
			font-weight: bold;
			border-radius: 15rpx;
			width: calc(100vw - 60rpx);
			font-size: 56rpx;
			height: 70rpx;
			background: #000;
			letter-spacing: 2rpx;

			@keyframes textcolor {
				0% {
					text-shadow: 0 0 5px #ff000050;
				}

				100% {
					text-shadow: 0 0 0px red;
				}
			}

			.count-get {
				flex: 1;
				border-radius: 10rpx;
				padding: 4rpx;
				border: 1rpx solid #55557f;
				text-align: right;
				position: relative;

				.bg-count {
					color: rgba(219, 0, 3, 0.2);
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}

				.count-show {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
					// animation: textcolor 1s linear infinite;
				}
			}

			.count-total {
				text-align: right;

				flex: 1;
				border-radius: 10rpx;
				padding: 4rpx;
				border: 1rpx solid #55557f;
				position: relative;

				.bg-count {
					color: rgba(219, 0, 3, 0.2);
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}

				.count-show {
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}
			}
		}
	}

	.start-btn {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
		display: block;
	}

	.color-box {
		@extend .game-box-border;
		border-radius: 20rpx;
		margin-top: 20rpx;
		background: linear-gradient(180deg, #FFFFFF55, #55ff7fd1 100%);
		// background: #FFFFFF55;
		backdrop-filter: blur(4px);
	}

	.reward-zone-box {
		border: 2px solid #ffaaff;
		/* 边框颜色 */
		border-radius: 20rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		font-family: Arial, sans-serif;
		/* 字体 */
		margin: 0 2rpx;

		.prize-amount {
			padding: 10rpx 0;
			font-weight: bold;

		}

	}

	.stake {
		letter-spacing: 4rpx;
		font-size: 46rpx;
		padding: 10rpx 0;
		font-weight: bold;
		color: rgba(219, 0, 3, .7);
		position: relative;
		height: 50rpx;

		.bg-count {
			color: rgba(219, 0, 3, 0.2);
			position: absolute;
			top: 0rpx;
			right: 10rpx;
		}

		.count-show {
			position: absolute;
			top: 0rpx;
			right: 10rpx;
			// animation: textcolor 1s linear infinite;
		}
	}

	.reward-zone {
		width: calc((100vw - 180rpx) / 8);
		height: calc((100vw - 60rpx) / 8);

		.reward-chart-img {
			width: 100%;
			height: 100%;
		}
	}

	.reward-chart {
		width: 100%;
		height: 100%;
	}

	// .paihang{
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	z-index: 100;
	// }
	.tutorial{
		top: 120rpx;
		left: 0;
		position: fixed;
		width: 750rpx;
		z-index: 999999999;
	}
	.game-box {
		margin-top: 20rpx;
		position: relative;
		width: calc(100vw - 60rpx);
		height: calc(100vw - 60rpx);

		.score-box {
			position: relative;
		}

		.game-box-border {
			box-shadow: 0 0 0 2px #F3E0BC;
		}

		.btn-box {
			padding: 20rpx 0rpx;
			background: #FFFFFF55;
			backdrop-filter: blur(3px);
			@extend .game-box-border;
			border-radius: 20rpx;
		}

		.game-kuang {
			position: absolute;
			z-index: 10;
			width: calc((100vw - 60rpx) / 7);
			height: calc((100vw - 60rpx) / 7);

		}

		.guess-multiplier {
			position: absolute;
			top: 110rpx;
			left: 50%;
			transform: translate(-50%, 0);
			color: rgba(219, 0, 3, 1);
			background: #FFFFFFa1;
			padding: 20rpx;
			border-radius: 15rpx;

			.po-box {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				font-size: 40rpx;

				.bg-count {
					color: rgba(219, 0, 3, 0.2);
					position: absolute;
					top: 10rpx;
					right: 0rpx;
					letter-spacing: 4rpx;
				}

				.count-show {
					position: absolute;
					top: 10rpx;
					right: 0rpx;
					letter-spacing: 4rpx;
					// animation: textcolor 1s linear infinite;
				}
			}
		}

		.guess-size {
			position: absolute;
			bottom: 150rpx;
			left: 50%;
			transform: translate(-50%, 0);
			color: rgba(219, 0, 3, 1);
			background: #FFFFFFa1;
			padding: 20rpx;
			border-radius: 15rpx;

			.po-box {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				font-size: 70rpx;

				.bg-count {
					color: rgba(219, 0, 3, 0.2);
					position: absolute;
					top: 10rpx;
					right: 0rpx;
					letter-spacing: 4rpx;
				}

				.count-show {
					position: absolute;
					top: 10rpx;
					right: 0rpx;
					letter-spacing: 4rpx;
					// animation: textcolor 1s linear infinite;
				}
			}
		}


		.star {
			box-shadow:
				0 0 20px 3px rgba(219, 0, 3, 0.7),
				/* 外发光 */
				inset 0 0 20px 10px rgba(219, 0, 3, 0.7);
			/* 内发光 */
			// 添加动画
			animation: star 2s infinite;
		}

		.flash {
			box-shadow:
				0 0 20px 3px rgba(219, 0, 3, 0.7),
				/* 外发光 */
				inset 0 0 20px 10px rgba(219, 0, 3, 0.7);
			/* 内发光 */
			// 添加动画
			animation: star .4s infinite;
		}

		@keyframes star {
			0% {
				transform: scale(1);

			}

			50% {
				border-radius: 10rpx;
				transform: scale(1.1);

			}

			100% {
				transform: scale(1);

			}
		}

		.icon {
			display: block;
			width: calc((100vw - 60rpx) / 7);
			height: calc((100vw - 60rpx) / 7);
			@extend .game-box-border
		}

		.small {}

		.game-r {
			width: 100%;
		}
	}
</style>